<template>
  <div class="test" @mouseup="dragUpFunc()" @mousemove="dragMove()">
    <!-- <div id="ddd" ref="ddd" @mousedown="dragDownFunc($event)" v-drag @click="zoom">
      <div id="myChart" :style="{ width: '400px', height: '300px' }"></div>
    </div>
    <div id="kkk" ref="kkk" @mousedown="dragDownFunc($event)"  v-drag @click="zoom($event)">
      <div id="myChart2" :style="{ width: '400px', height: '300px' }"></div>
    </div> -->
    <div id="ddd" ref="ddd" v-drag :style="{ zoom: 1 }">
      <div id="myChart" :style="{ width: '400px', height: '300px' }"></div>
    </div>
    <div id="kkk" ref="kkk" v-drag>
      <div id="myChart2" :style="{ width: '400px', height: '300px' }"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "loginz",
  data() {
    return {
      startDisX: "",
      endDisY: "",
      isDrag: false,
      Drag: "",
      Zoom: ""
    };
  },
  created() {},
  mounted() {
    this.drawLine();
    this.drawCircle();
  },
  directives: {
    drag: {
      // 指令的定义
      bind: function(el, binding, vnode) {
        console.log(el);
        console.log(binding);
        console.log(vnode.context);
        let odiv = el; //获取当前元素
        odiv.onmousedown = e => {
          //算出鼠标相对元素的位置
          let disX = e.clientX - odiv.offsetLeft;
          let disY = e.clientY - odiv.offsetTop;

          document.onmousemove = e => {
            //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            let left = e.clientX - disX;
            let top = e.clientY - disY;

            //绑定元素位置到positionX和positionY上面
            vnode.context.positionX = top;
            vnode.context.positionY = left;

            window.localStorage.setItem("top", top);
            window.localStorage.setItem("left", left);

            //移动当前元素
            odiv.style.left = left + "px";
            odiv.style.top = top + "px";
          };
          document.onmouseup = () => {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      }
    }
  },

  methods: {
    dragDownFunc(item) {
      console.log("dragDowm");
      // console.log(item.target.id);
      this.isDrag = true;
      this.Drag = this.$refs[item.target.id];
      let ev = event || window.event;
      // event.stopPropagation();
      this.startDisX = ev.clientX - this.Drag.offsetLeft;
      this.endDisY = ev.clientY - this.Drag.offsetTop;
    },

    dragUpFunc() {
      console.log("dragUp");
      this.isDrag = false;
    },

    dragMove() {
      if (this.isDrag == true) {
        console.log("dragMove");
        var ev = event || window.event;
        this.Drag.style.left = ev.clientX - this.startDisX + "px";
        this.Drag.style.top = ev.clientY - this.endDisY + "px";
      }
    },

    zoom(item) {
      console.log("zoom");
      if (this.Zoom) {
        this.Zoom.style.border = "2px solid #92cccc";
      }
      this.Zoom = this.$refs[item.target.id];
      this.Zoom.style.border = "dashed";
    },

    drawLine() {
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      myChart.setOption({
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line"
          }
        ]
      });
    },

    drawCircle() {
      let myChart = this.$echarts.init(document.getElementById("myChart2"));
      myChart.setOption({
        title: {
          text: "Referer of a Website",
          subtext: "Fake Data",
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    }
  }
};
</script>

<style scoped>
.test {
  height: 100%;
  width: 100%;
}
#ddd {
  position: absolute;
  width: 500px;
  height: 400px;
  border: 2px solid #92cccc;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1200px;
}
#kkk {
  position: absolute;
  width: 500px;
  height: 400px;
  border: 2px solid #92cccc;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1200px;
}
</style>
